<template>
  <div class="join-us">
    <div class="rcll wow">
      <h2>人才理念</h2>
      <h3>任人唯贤有为有位</h3>
      <div class="rcll-box wow">
        <img
          src="https://www.shbotao.net//uploads/allimg/20211127/aa0bb9fe315d392441d6336cefae9783.png"
          alt=""
        />
        <p>
          选贤举能，贤者必上进,能者有前途。雅阁汇引进德才兼备的贤者，为每一位真正能为企业发展做出贡献的员工提供尽情发挥的舞台,个人的付出和收获、能力和地位必定成正比
        </p>
      </div>
    </div>
    <div class="xr">
      <div class="bottom-box wow">
        
        <div class="text-layer" v-for="(item,index) in List" :key="index" :style="{'display': index==Iniac?'block':'none'}">
          <h2>{{ item.title }}</h2>
          <h3>{{ item.dis }}</h3>
          <p>{{ item.content }}</p>
        </div>
        <div class="img-box">
          <div class="icon1" :class="{'active':index == Iniac}" v-for="(item,index) in List" :key="index" @click="Iniac = index">
            
            <img
                :src="index == Iniac?'/src/assets/img/join_yr001.png':'/src/assets/img/join_noyr001.png'"
              alt=""
            />
            <span>{{ item.title }}</span>
          </div>
          <div class="radius" :style="{transform: 'rotate('+List[Iniac].du+'deg)'}"></div>
        </div>
      </div>
    </div>
    <div class="require-info">
      <h2 class="wow">招聘信息</h2>
      <p class="zhanwei">站位</p>
      <ul>
        <li class="wow" v-for="(item,index) in Array" :key="index" :style="{'animation-delay': (0.3+0.1*index)+'s'}">
          <h3>{{ item.title }}</h3>
          <div class="icons-box"><span>2名</span> <span>{{ item.date }}</span></div>
          <div class="require">岗位要求</div>
          <div class="text" style="height: 76px">
            <p>{{ item.content }}</p>
          </div>
        </li>
      </ul>
      <div class="hr-info wow">
        <h2>人力资源部</h2>
        <p>133-5000-6370</p>
        <p>绵阳市宜美家国家家居五楼</p>
        <div class="img-box"><img src="/src/assets/img/erweima.jpg" /></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const Iniac = ref(0)
const List = ref([
    {
        title:'选人',
        dis:'“有魂、有力、有激情“的三有新人',
        du:'50',
        content:'雅阁汇是个充满无限可能的企业，而对于选用人才，坚持选用对自己的未来有明确目标和企图心的人才，梦想是目标、能力是支撑、激情是态度、准备是自信，雅阁汇欢迎做好准备去迎接一切未知的挑战的人才。'
    },
    {
        title:'用人',
        dis:'以德为先（德者先、能者上、庸者下）',
        du:'74',
        content:'以德为先是雅阁汇一贯的用人理念，“德”体现的是一个人的心性和修养，“能”是指一个人的才能、能力，“庸”指懒惰、行动力极弱的人雅阁汇重视有德的人，重用有才能的人,因为这样的人才会在团队的工作中发挥正面效果,而庸者必然会被淘汰。'
    },
    {
        title:'育人',
        dis:'递进培育（立足岗位、磨炼成才、精心培养、助推成长）',
        du:'105',
        content:'雅阁汇要提升企业的综合实力，要求每一位员工都立足自己的岗位，将岗位作为自己的舞台，不断增强自己的经验、知识和技能，同时为员工提供层层递进的培训机会，挖掘员工的潜力，让其在实践中丰富自身经验，了解更多知识，提升个人的工作技能，助推人才成长。'
    },
    {
        title:'留人',
        dis:'共生共长（事业留人、发展留人、情感留人）',
        du:'130',
        content:'雅阁汇重视员工个人价值的体现，让大家在为雅阁汇工作的同时，个人事业有所成就、物质生活极大改善，营造一个有情感的大家庭，使大家在家的温情的感染下互相关心、互相支持、共同提高。事业留人: 雅阁汇挖掘延伸装饰全产业链为优秀的员工提供创业的机会和资源支持,实现共嬴发展留人: 雅阁汇为每一位员工提供岗位规划，制定明确的培训阶梯让每个人能够深入挖掘自我潜能，在事业上获得成长展现价值情感留人: 几十年的发展,雅阁汇文化形成了有亲和力的家文化相亲相爱，相互帮扶,雅阁汇为家人们设立了爱心基金，以备不时之需'
    },
])
const Array = ref([
    {
        title:'商务总监',
        date:'2024-07-16',
        content:'1、根据公司整体发展目标，制定市场计划和销售计划；2、负责开发和维护重点市场和重点行业的核心客户；3、组建执行力强的商务团队，并带领团队实现市场和销售目标。 '
    },
    {
        title:'商务总监',
        date:'2024-07-16',
        content:'1、根据公司整体发展目标，制定市场计划和销售计划；2、负责开发和维护重点市场和重点行业的核心客户；3、组建执行力强的商务团队，并带领团队实现市场和销售目标。 '
    },
    {
        title:'商务总监',
        date:'2024-07-16',
        content:'1、根据公司整体发展目标，制定市场计划和销售计划；2、负责开发和维护重点市场和重点行业的核心客户；3、组建执行力强的商务团队，并带领团队实现市场和销售目标。 '
    },
    {
        title:'商务总监',
        date:'2024-07-16',
        content:'1、根据公司整体发展目标，制定市场计划和销售计划；2、负责开发和维护重点市场和重点行业的核心客户；3、组建执行力强的商务团队，并带领团队实现市场和销售目标。 '
    },
])
</script>

<style>
html .join-us .rcll,
html .join-us h2 {
  opacity: 0;
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}

html .join-us .xr .img-box {
  opacity: 0;
  animation: slide-left-in 2s, fade-in 2s;
  animation-fill-mode: forwards;
}

html .join-us .xr .bottom-box {
  opacity: 0;
  animation: slide-right-in 2s, fade-in 2s;
  animation-fill-mode: forwards;
}

html .join-us ul li {
  opacity: 0;
  animation: fade-in 1s;
  animation-fill-mode: forwards;
}

html .join-us .hr-info {
  opacity: 0;
  animation: slide-down-in 1s, fade-in 1s;
  animation-fill-mode: forwards;
}

.join-us {
  line-height: 1;
  background: #f3f3f3;
}

.join-us img {
  vertical-align: middle;
}

.join-us .banner,
.join-us .banner img {
  height: 9.15rem;
}

.join-us .rcll {
  margin: 0 auto;
  width: 6.9rem;
}
.join-us .rcll .rcll-box {
  display: flex;
  background: #dd292c;
  padding: 0.5rem;
}
.join-us .rcll .rcll-box img {
  width: 2rem;
  height: 2rem;
}
.join-us h2 {
  padding-top: 0.79rem;
  font-size: 0.56rem;
  font-weight: 700;
}

.join-us h3 {
  margin: 0.25rem 0;
  font-weight: 500;
  font-size: 0.32rem;
  color: #999;
}

.join-us .rcll p {
  margin-left: 0.38rem;
  font-size: 0.22rem;
  color: #fff;
  line-height: 0.4rem;
}

.join-us .xr .img-box {
  height: 7.41rem;
  position: relative;
}

.join-us .xr .img-box img {
  width: 100%;
  height: 7.41rem;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
}

.join-us .xr .img-box:after,
.join-us .xr .img-box:before {
  position: absolute;
  width: 0.2rem;
  height: 0.2rem;
  background: #fff;
  bottom: 0;
  opacity: 0.8;
}

.join-us .xr .img-box:before {
  left: 0;
}

.join-us .xr .img-box:after {
  right: 0;
}

.join-us .xr .bottom-box {
  position: relative;
  padding: 0.31rem 0.4rem 0;
  background-color: #fff;
  border-bottom-left-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

.join-us .xr .bottom-box h2 {
  font-weight: 700;
}

.join-us .xr .bottom-box h2 {
  top: -1.2rem;
  font-size: 0.48rem;
  color: #000;
}

.join-us .xr .bottom-box p {
  font-size: 0.22rem;
  color: #666;
  line-height: 0.4rem;
}

.join-us .xr .bottom-box .text-layer {
  opacity: 0;
  -webkit-animation: fade-in 1s;
  animation: fade-in 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.join-us .xr .bottom-box .text-layer p {
  padding-right: 0.2rem;
  height: 1.6rem;
  overflow-y: scroll;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}

.join-us .xr .bottom-box .text-layer p::-webkit-scrollbar {
  width: 0.05rem;
  height: 0.05rem;
}

.join-us .xr .bottom-box .text-layer p::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.01rem transparent;
  border-radius: 0.1rem;
  background-color: transparent;
}

.join-us .xr .bottom-box .text-layer p::-webkit-scrollbar-thumb {
  border-radius: 0.1rem;
  box-shadow: inset 0 0 0.06rem rgba(0, 0, 0, 0.3);
  background: #dad6d6;
}

.join-us .xr .bottom-box .button-wrap {
  margin-top: 0.56rem;
  margin-bottom: 1rem;
}

.join-us .xr .bottom-box .button-wrap .btn {
  margin: 0 auto;
  font-weight: 700;
}

.join-us .xr .bottom-box .img-box {
  margin-top: 1rem;
  position: relative;
  overflow: hidden;
  width: 6.7rem;
  height: 2.09rem;
  font-size: 0.22rem;
  color: #fff;
  background: url(/src/assets/img/join_by.png) no-repeat;
  background-size: 100% 100%;
}

.join-us .xr .bottom-box .img-box .row1 {
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
}

.join-us .xr .bottom-box .img-box .row1 > div {
  margin: 0 0.61rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.join-us .xr .bottom-box .img-box .row1 > div img {
  width: 0.32rem;
  height: 0.31rem;
  margin-bottom: 0.12rem;
}

.join-us .xr .bottom-box .img-box .row1 > div span {
  width: 100%;
}

.join-us .xr .bottom-box .img-box .row1 > div:nth-child(2) img {
  width: 0.35rem;
  height: 0.32rem;
}

.join-us .xr .bottom-box .img-box div.active {
  color: #ffd1b3;
}

.join-us .xr .bottom-box .img-box .row2 {
  margin-top: 0;
}

.join-us .xr .bottom-box .img-box .row2 > div {
  margin: 0 1.82rem;
}

.join-us .xr .bottom-box .img-box .row2 > div img {
  width: 0.34rem;
  height: 0.29rem;
}

.join-us .xr .bottom-box .img-box .row2 > div:first-child {
  margin-left: 0;
}

.join-us .xr .bottom-box .img-box .row2 > div:nth-child(2) {
  margin-right: 0;
}

.join-us .xr .bottom-box .img-box .row2 > div:nth-child(2) img {
  width: 0.35rem;
  height: 0.3rem;
}

.join-us .xr .bottom-box .img-box > div {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.join-us .xr .bottom-box .img-box > div img {
  width: 0.34rem;
  height: 0.29rem;
  margin-bottom: 0.12rem;
}

.join-us .xr .bottom-box .img-box > div img span {
  font-size: 0.22rem;
  color: #ffd1b3;
}

.join-us .xr .bottom-box .img-box > div:first-child {
  bottom: 0.3rem;
  left: 0.79rem;
}

.join-us .xr .bottom-box .img-box > div:nth-child(2) {
  bottom: 1.08rem;
  left: 2.21rem;
}

.join-us .xr .bottom-box .img-box > div:nth-child(3) {
  bottom: 1.05rem;
  right: 2.25rem;
}

.join-us .xr .bottom-box .img-box > div:nth-child(4) {
  bottom: 0.3rem;
  right: 0.79rem;
}

.join-us .xr .bottom-box .img-box:after,
.join-us .xr .bottom-box .img-box:before {
  display: none;
}

.join-us .xr .bottom-box .img-box .radius {
  position: absolute;
  width: 6.72rem;
  height: 0.02rem;
  bottom: -1.6rem;
  transform: rotate(90deg);
  transition: all 0.3s;
}

.join-us .xr .bottom-box .img-box .radius:before {
  content: '';
  position: absolute;
  top: -0.19rem;
  left: 0.6rem;
  width: 0;
  height: 0;
  transform: rotate(0deg);
  border: 0.2rem solid transparent;
  border-right-color: #f40;
}

.join-us .require-info {
  padding: 0 0.3rem 1rem;
  background: #f3f3f3;
}

.join-us .require-info .zhanwei {
  font-size: 0.24rem;
  line-height: 0.36rem;
  visibility: hidden;
}

.join-us .require-info h2 {
  margin-bottom: 0.63rem;
  font-size: 0.56rem;
  font-weight: 700;
  text-align: center;
  color: #000;
}

.join-us .require-info > ul > li {
  padding: 0.68rem 0.39rem 0.49rem;
  margin-bottom: 0.7rem;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 0 0.09rem 0.09rem 0.01rem rgba(19, 33, 50, 0.06);
  border-radius: 0.1rem;
  transition: all 0.4s;
}

.join-us .require-info > ul > li h3 {
  font-size: 0.46rem;
  font-weight: 700;
  color: #000;
}

.join-us .require-info > ul > li .icons-box {
  display: flex;
  margin-top: 0.21rem;
  padding-bottom: 0.71rem;
  font-size: 0.24rem;
  font-weight: 400;
  color: #666;
  border-bottom: 0.01rem solid hsla(0, 0%, 40%, 0.2);
}

.join-us .require-info > ul > li .icons-box span {
  display: flex;
  align-items: center;
}

.join-us .require-info > ul > li .icons-box span:before {
  margin-right: 0.1rem;
  content: '';
  background: url(/src/assets/img/join_zp001.png)
    no-repeat;
  background-size: 100% 100%;
}

.join-us .require-info > ul > li .icons-box span:first-of-type {
  margin-right: 0.44rem;
}

.join-us .require-info > ul > li .icons-box span:first-of-type:before {
  width: 0.22rem;
  height: 0.19rem;
}

.join-us .require-info > ul > li .icons-box span:nth-of-type(2):before {
  background-image: url(/src/assets/img/join_zp002.png);
  width: 0.22rem;
  height: 0.22rem;
}

.join-us .require-info > ul > li .require {
  margin-top: 0.39rem;
  font-size: 0.26rem;
  color: #999;
}

.join-us .require-info > ul > li .text {
  margin-top: 0.37rem;
  font-size: 0.24rem;
  color: #666;
  line-height: 0.36rem;
  overflow: hidden;
  transition: all 0.4s;
  white-space: pre-wrap;
}

.join-us .require-info > ul > li .retract {
  position: relative;
  overflow: hidden;
}

.join-us .button-wrap .btn {
  font-weight: 700;
}

.join-us .hr-info {
  text-align: center;
}

.join-us .hr-info h2 {
  margin-top: 1rem;
  margin-bottom: 0;
  font-size: 0.34rem;
}

.join-us .hr-info p {
  font-size: 0.24rem;
  margin: 0.3rem 0;
}

.join-us .hr-info p:before {
  margin-right: 0.1rem;
  position: relative;
  top: -0.04rem;
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0.22rem;
  height: 0.22rem;
  background: url()
    no-repeat;
  background-size: 100% 100%;
}

.join-us .hr-info p:first-of-type,
.join-us .hr-info p:nth-of-type(2) {
  margin-top: 0.5rem;
}

.join-us .hr-info p:nth-of-type(2):before {
  width: 0.21rem;
  height: 0.24rem;
  background-image: url();
}
.join-us .hr-info .img-box img {
  width: 2.39rem;
}
</style>